Hello and welcome to this lecture in this lecture.
We'll be creating the functionality for the tip cuk later with java script.
I haven't got my text edit open it this might have a script file.
This is where we are actually going to be writing the jig query code to create functionality for the
app.
Jake Query is a javascript library.
The way this lecture is going to work I'm not very good at multitasking.
See right writing the code and explain it at the same time so the way the format here is that I will
write the code and then I'll explain it to you afterwards so that you don't have to watch me type and
explain same types are right.
And then I explain.
Okay so on line one here I have created a function so I've defined.
This is going to define the function in between this curly braces.
So if I just tab to expand them what the function will do it will perform the actual calculation.
So in between the curly braces there I am going to define some variables.
A variable is used to hold som information say hellebore a variable will store a piece of information
to 1 Create a few variables to hold various information.
I have created some variables here from Lyme 3 to 6 so are just run through them with you.
Line 3 here.
Created a variable called a mount so uses to retrieve the values from the amount and the percentage
fields and then store them inside the variables.
Okay so the variable amount will store that also.
Line for here will got a variable chord percentage.
Also this will be used to store the percentage values and then deduct Valle mayne's it will calculate
the value.
Okay.
Line for line finally again quoting the variable court tape and the value equal so the amount times
they asked her examines times Times him in the parenthesis got a percentage to notice that is in the
panties.
We've got percentage divided by a hundred.
Okay so the tip amount.
We're trying to find the value of the percentage.
It would be whatever amount we enter for the tape times the percentage.
And this is how you find the percentage you just divide by a hundred.
That will give you the percentage.
That's what that line 5 line say.
It's a variable that will store the total amount plus the tip and case for this will give you the total.
So once we've calculated the percentage of the tip it all will add that to the value of the total amount.
So these are all the variables store various values.
Notice that the every variable was have a value and the value is here higher than the values are equal
as to function.
So we've got the friend functions here so this any way you see a dollar sign being used.
Note that you are referencing the query library.
So did dollar sign indicates a jaquie library.
Line 3 here we've got the variable amount equal to this function here.
This juv query function and the name of the function is mount as the value passed into it.
Okay lifebuoy again that's another function line.
Five is were used line 5 to calculate the how to tip amount and then Line 6 6.
Here we created the variable variables.
It was to the number function and inside the number function were passed it.
The the argument all come out.
One thing you need to know that the true number function on line 6.
The number function the amount is actually a string is trinkets that would be ATEX.
So then by adding in number two a string makes it makes it longer so.
So the string we actually have to convert convert the string into any number first using the variable
total equal number and then pass it.
An argument of amount.
Then we add the tip o k.
I have added some more functions here from line 8 to 14.
Again the way you see the dollars I use now that we are referencing a G query library.
Just a quick note is no is that or the like this on line 3 here.
This here this idea that I have passed 10 here is to raise.
We defined this Heidi inside the hastier mail so the idea amounts percent and tall tall.
If we pop out of the see a male we can see where we've defined it somewhat.
And Heidi here implied Ecod amount.
Got an idea called percent we've got an idea caught tip so that's where we've got these values from.
From these are or I.D. attributes that we have defined inside the hastier melts or we are not calling
them and using them as an argument in our G.
Query function.
Okay let's focus on the code we've just added on so from line 8 to line 14.
Okay I've created some functions here not so we are going to use this functions to our fullest.
Or the values in the result fields.
So note that we are working for the call to the sick to fixed action.
This online is here.
K.
The tepe to have fixed function.
Note that the.
To fix ouch and function.
What both of what is.
This is a property of all the numbers.
This makes sure that they are only to two digits after the decimal.
The too expensive.
Is there is this function.
It is a name.
Make sure that there are only two digits after the decimal point.
Okay.
That's why it is used for same thing.
What line line here.
The function here shows that the.
They're smart they're smart.
Points are only two digits.
Okay.
Make sure that the numbers are two digits after the decimal point.
That's what they are for.
And then they return.
Basically it will rate on force.
If the value is force
the use of the return here on line 11 truly prevents the prevent submission.
So basically what is written.
Force is usually used inside a call-back to prevent default behaviour.
Okay so in relation to this.
This code here it will in each tool prevent the form from submitting to dozens submit the form.
So if they're not shell what that means is that in the line of code after the return force will not
be executed.
Okay.
That's basically why this return is.
So the we've now got is submit event function here which is on line 14.
So this is Joe query here and disallowed talk is picked is the calculator idea which is the actual form
and we've attached a dot sub meet event to the function.
And is passed test calculate which is the actual button that you press to do the calculation.
So what that does is submit evade functions most return force.
Okay so this tells the browser not to load a new page.
That's what the return force is.
Okay so it tells a browser not to load a new page.
So any code outside underneath this code here while not load a new page.
That's what the return force means.
Okay and here on line 14 here.
At times this function here we about taja the function to the form submit event so this function and
we've attached it to the submit it so that's it for this function so that we've created a function.
Now the cut be a percentage cut glitter should work.
So I'll just save this.
There are any aspects of this show you do not understand.
If I have not made myself clear enough.
Please feel free to contact me.
Be more than happy to explain a bit further.
Also you could any of the code pathological journals sure of.
You can just research it or contact me.
I really would be pleased to help.
Okay so I've saved it so if I open my calculator we should be able to perform some calculations.
Okay this is the calculation so let's test it out.
So for example we have a bill of eighty dollars.
We all we need to pay a percent or a percentage.
Or C 10 percent.
So we'll come here and click on calculate Well let's see.
Ah right that hadn't saved the problem.
Okay so we can see here now let me do that again.
Clear that so that you can see
just clear this field
key.
I just refresh my browser right so if I pop in a new value there say for example we had a B or it is
five dollars.
We talk we have to pay five percent in tips.
So click clack.
And he tells us that the amount of tip we're paying is four dollars 25.
So the total amount would be 89 dollar 25.
So we've tested out late on a tip and it works perfectly.
Thank you so much for your time.
I hope the projet is useful.
Take care.
Bye for now.